<template>
  <div class="user-header-container">
    <div class="back" v-if="hasLeft" @click="goback">
      <span class="">⬅</span>
    </div>
    <div>
      <span>{{ title }}</span>
    </div>
    <div class="right" v-if="hasRight">
      <span class="">{{ rightTx }}</span>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  setup(props) {
    console.log('props', props);
    return {};
  },
});
</script>

<style scoped lang="scss">
.user-header-container {
  height: 48px;
  width: 100%;
  line-height: 48px;
  display: flex;
  justify-content: center;
  border-bottom: 1px #292831 solid;
  background-color: #101821;
  color: #eeeeee;
  position: relative;
  .back {
    position: absolute;
    left: 10px;
  }
  .right {
    position: absolute;
    right: 10px;
  }
}
</style>
